<template>
  <div class="register">
    <div>
      <img
        class="middleImg"
        style="width: 2.68rem; height: 0.9rem; margin-left: 130px; margin-top: 200px"
        src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png"
        alt=""
      />
    </div>
    <!-- v-model="password" -->
    <!-- <van-cell-group inset> -->
    <!-- v-model="phone" -->
    <!--   error-message="手机号格式错误" -->

    <!-- <van-field :center="true" label-width="50px" placeholder="邮箱账号" maxlength="11" label-align="top" />
      <van-field :center="true" label-width="50px" placeholder="邮箱密码" label-align="top" />
      <div class="loginError">
        <span style="color: gainsboro; margin-left: 62px; font-size: 14px">注册账号</span>
        <a href="https://reg.163.com/naq/findPassword?pd=yanxuan_web&pkid=pXPYGTc#/verifyAccount">忘记密码</a>
      </div>
      <van-button class="phoneBtn" type="danger">登录</van-button>
    </van-cell-group>
    <a class="otherLogin" href="/center">其他登录方式></a> -->
    <van-form class="formRegister">
      <van-cell-group inset>
        <van-field
          v-model="phoneNumber"
          name="手机号"
          maxlength="11"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="phoneCode"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
        </van-field>
        <van-button class="getCode" @click="getCode" type="primary" size="mini">获取验证码</van-button>
        <van-field
          v-model="pwd"
          type="password"
          name="注册密码"
          label="注册密码"
          placeholder="注册密码"
          :rules="[{ required: true, message: '请填写注册密码' }]"
        />
        <van-field
          v-model="confirm"
          type="password"
          name="确认注册密码"
          label="确认注册密码"
          placeholder="确认注册密码"
          :rules="[{ required: true, message: '请填写注册密码' }]"
        />
      </van-cell-group>

      <van-field name="checkbox">
        <template #input>
          <van-checkbox v-model="checked" shape="square" />
          同意协议并注册《商品会用户协议》
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button @click="register" round block class="fromBtn" type="danger" native-type="submit"> 注册 </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Register'
})
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import userLogin from '@/api/userLogin'
import { showNotify } from 'vant'
import InfoData from '@/api/userLogin'
import { useRouter } from 'vue-router'
//手机号
const phoneNumber = ref('')
//验证码
const phoneCode = ref('')
//密码
const pwd = ref('')
//确认密码
const confirm = ref('')
//同意勾选
const checked = ref(false)
const router = useRouter()
// const adminRegister = ref({
//   phone: phoneNumber.value,
//   code: phoneCode.value,
//   password: pwd.value
// })
//注册逻辑
const register = async () => {
  const adminRegister = {
    phone: phoneNumber.value,
    code: phoneCode.value,
    password: pwd.value
  }
  try {
    //判断注册需要的东西是否存在，存在再发请求
    if (checked.value === true && pwd.value !== '' && confirm.value !== '') {
      const result = await userLogin.getRegister(adminRegister)
      console.log(result)
      if (result.data !== null) {
        showNotify({ type: 'danger', message: '账号已被注册' })
      } else {
        showNotify({ type: 'success', message: '注册成功' })
        router.push('/center')
      }
    } else {
      if (checked.value !== true) {
        showNotify({ type: 'danger', message: '请勾选同意协议' })
      }
    }
  } catch (error) {
    showNotify({ type: 'danger', message: '注册失败' })
  }
}
//获取验证码
const getCode = async () => {
  try {
    const res = await userLogin.getPhoneCode(phoneNumber.value)
    console.log(res)
    phoneCode.value = res.data
    showNotify({ type: 'success', message: '已获取验证码' })
  } catch (error) {
    showNotify({ type: 'danger', message: '未获取验证码' })
  }
}
</script>

<style lang="less" scoped>
.formRegister {
  position: relative;
  margin-top: 100px;
}
.getCode {
  position: absolute;
  right: 30px;
  top: 25px;
}
</style>
